<template>
<div class=''>
    <p>
            <n-button type="primary" size="medium" @click="czkkwerr" :loading="loadee">重置底部菜单</n-button>

          </p>
          <div class="ohonewert mt20">
            <p class="kkjnmseer">{{ wzname }}</p>
            <div class="botomwerert display-flex ">
              <div class="flex-1 pr dsfsdfsdrt" v-for="(item, idx) in meuyyghw" :key="idx">
                <n-button class="h100 w100 dfdsrttwertr">
                  {{ item.name }}
                  <div class="kknxeertrwe vertical-center">
                    <p>
                      <i class="iconfont  dx-add cf fz18 sz" @click="addSJHD(item, idx, 2)"></i>
                      <i class="iconfont dx-edit cf fz18 ml20 sz" @click="bianji(item, idx, 1)"></i>
                      <i class="iconfont dx-shanchu ml20 cf fz18 sz" @click="delsanchue(idx)"></i>
                    </p>
                  </div>
                </n-button>

                <div class="jjnnkxeertrt">
                  <div class="jnmxeerrtw pr" v-for="(ijne, idxw) in item.sub_button" :key="idxw">
                    <n-button class="h100 w100">{{ ijne.name }} </n-button>

                    <div class="kknxeertrwe vertical-center">
                      <p>

                        <i class="iconfont dx-edit cf fz18 ml20 sz" @click="bianji(ijne, idx, 3, idxw)"></i>
                        <i class="iconfont dx-shanchu ml20 cf fz18 sz" @click="delsanchue(idx, idxw)"></i>
                      </p>
                    </div>

                  </div>
                </div>
              </div>
              <div class="vertical-center">
                <n-tooltip trigger="hover">
                  <template #trigger>
                    <n-button @click="addbtnm" class="h100"> <span class="fz22">+</span> </n-button>
                  </template>
                  点击添加一级菜单
                </n-tooltip>
              </div>

            </div>
          </div>


          <n-modal v-model:show="showModal" preset="card" style="width:500px">
      <template #header>
        <div>{{ gyywerr() }}菜单</div>
      </template>
      <div>
        <p class="z9 fz12">自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单
          <a
            href="https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html">具体参数配置</a>
        </p>

        <n-form :label-width="100" label-placement="left" class="mt20">
          <n-form-item label="菜单名称">
            <n-input placeholder="请输入菜单名称" v-model:value='formM.name' />
          </n-form-item>
          <n-form-item label="菜单类型">
            <n-select v-model:value="formM.type" size="medium" :options="cdoptions" clearable />
          </n-form-item>
          <n-form-item label="菜单内容">
            <n-input placeholder="请输入菜单内容如跳转的链接" v-model:value='formM.data' />
          </n-form-item>
        </n-form>



      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
          <n-button type="info" class="ml20" @click="addcaidan"> 确认 </n-button>
        </div>
      </template>
    </n-modal>
</div>
</template>
 <script lang='ts' setup>
 import { ref } from "vue";
import { dxget, dxpost, dialog } from "../../../util/index";
const showModal = ref(false)
const sxname = 'wxdibucd'
const apiurl = 'dxgjAdmin/dxglobalSetting'
const isbj = ref(false) // 是否为编辑的状态
let bjid = 0


const loadee = ref(false)
const qrUrl = ref();
const wzname = import.meta.env.VITE_name;
const meuyyghw = ref([])
const candse = ref(0)// 菜单的状态 0新增加1级菜单 1为编辑一级菜单  2 新增二级  3编辑二级
const dqitemIdex = ref()
const dqitemIdexer = ref()
const initData = async () => {
    const { data }: any = await dxget(apiurl, { sxname, roleId: localStorage.id })
    if (data.length <= 0) {
        return
    }
    isbj.value = true
    bjid = data[0].id
    const dataw = JSON.parse(data[0].text)
    if (dataw) {
        meuyyghw.value = dataw
        console.log(meuyyghw.value );
    }
};

const formM = ref({
  "type": "view",
  "name": "",
  "data": ""
})
const cdoptions = [
  {
    label: "click",
    value: "click"
  }, {
    label: "view",
    value: "view"
  }, {
    label: "scancode_waitmsg",
    value: "scancode_waitmsg"
  }, {
    label: "pic_sysphoto",
    value: "pic_sysphoto"
  }, {
    label: "pic_photo_or_album",
    value: "pic_photo_or_album"
  }, {
    label: "pic_weixin",
    value: "pic_weixin"
  }, {
    label: "location_select",
    value: "location_select"
  }, {
    label: "media_id",
    value: "media_id"
  }, {
    label: "article_id",
    value: "article_id"
  }, {
    label: "article_view_limited",
    value: "article_view_limited"
  }
]



const addbtnm = () => {
  if (meuyyghw.value.length > 2) {
    window.$message.error("一级菜单最多添加三个")
    return
  }
  candse.value = 0
  showModal.value = true
  formM.value = {
    "type": "view",
    "name": "",
    "data": ""
  }

}
const addcaidan = () => {
  if (!formM.value.name) {
    window.$message.error("请输入菜单名称")
    return
  }
  if (!formM.value.data) {
    window.$message.error("请输入菜单跳转地址")
    return
  }
  if (candse.value == 0) {
    meuyyghw.value.push(formM.value)
  }
  if (candse.value == 1) {
    meuyyghw.value[dqitemIdex.value] = formM.value
  }
  if (candse.value == 2) {
    if (!meuyyghw.value[dqitemIdex.value].sub_button) {
      meuyyghw.value[dqitemIdex.value].sub_button = []
    }
    meuyyghw.value[dqitemIdex.value].sub_button.push(formM.value)
  }
  if (candse.value == 3) {
    meuyyghw.value[dqitemIdex.value].sub_button[dqitemIdexer.value] = formM.value
  }
  showModal.value = false
  bottomSave()
}
const bottomSave = async () => {
    if (!isbj.value) {
        const { errno }: any = await dxpost(apiurl, { sxname, roleId: localStorage.id, text: JSON.stringify(meuyyghw.value) })
        if (errno == 0) {
            window.$message.success('操作成功！')
            return
        }
    } else {
        const { errno }: any = await dxpost(apiurl, { id: bjid, text: JSON.stringify(meuyyghw.value) }, 'put')
        if (errno == 0) {
            window.$message.success('保存成功！')
        }
    }
    loadee.value = false
    window.$message.success("重置成功");
}

const czkkwerr = async () => {
  loadee.value = true
  const { errno }: any = await dxget('wechar/gzh/index/setBottomMue', {
    cd: JSON.stringify(meuyyghw.value)
  })
  loadee.value = false
  if (errno == 0) {
    window.$message.success("重置成功");
  }
}




const bianji = (data, idx, ty, eridx?) => {
  candse.value = ty
  dqitemIdex.value = idx
  dqitemIdexer.value = eridx
  formM.value = JSON.parse(JSON.stringify(data))
  showModal.value = true
}
const delsanchue = async (idx, erjidx?) => {
  let statics: any = await dialog("此操作将永久删除, 是否继续?");

  if (statics == 1) {
    if (erjidx >= 0) {
      meuyyghw.value[idx].sub_button.splice(erjidx, 1)
    } else {
      meuyyghw.value.splice(idx, 1)
    }

  }
  bottomSave()
}
const addSJHD = (data, idx, ty, eridx?) => {
  candse.value = ty
  dqitemIdex.value = idx
  formM.value = {
    "type": "view",
    "name": "",
    "data": ""
  }
  showModal.value = true
}
const gyywerr = () => {
  let jhse = "新增一级"
  if (candse.value == 1) {
    jhse = '编辑一级'
  }
  if (candse.value == 2) {
    jhse = '新增二级'
  }
  if (candse.value == 3) {
    jhse = '编辑二级'
  }
  return jhse
}
initData();
</script>
<style scoped>
 .from-box-ks {
   max-width: 560px;
 }
 
 .question-mark-icon {
   position: absolute;
   right: -40px;
   top: 0;
   width: 20px;
   height: 20px;
 }
 
 .imgsjnnee {
   opacity: 0;
 }
 
 .imgsjnnee {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 99;
 }
 
 .save-btn {
   width: 120px;
 }
 
 .jjnsertwe {
   width: 200px;
   height: 200px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   overflow: hidden;
 }
 
 .ohonewert {
   width: 375px;
   height: 567px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   position: relative;
 }
 
 .kkjnmseer {
   text-align: center;
   line-height: 40px;
   font-size: 16px;
   border-bottom: 1px solid #e0e0e0;
 }
 
 .botomwerert {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 50px;
   border-top: 1px solid #e0e0e0;
 }
 
 .kknxeertrwe {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: none;
 }
 
 .dfdsrttwertr:hover .kknxeertrwe,
 .jnmxeerrtw:hover .kknxeertrwe {
   display: flex;
 }
 
 .jjnnkxeertrt {
   position: absolute;
   width: 100%;
   bottom: 50px;
 }
 
 .jnmxeerrtw {
   height: 40px;
 }
 </style>